<script lang="ts" setup>
import { ref, onMounted, reactive } from "vue";
import {
  roleList,
  roledel,
  roleadd,
  roleupd,
  perList,
  rolexp,
  roleper,
} from "../api/axios.js";
import { ElTree } from "element-plus";
import type Node from "element-plus/es/components/tree/src/model/node";
import { ElMessageBox } from "element-plus";
import { tr } from "element-plus/es/locale/index.js";
import type { FormInstance, FormRules } from "element-plus";
// 表单地非空验证
const treeRef = ref<InstanceType<typeof ElTree>>();
const ruleFormRef = ref<FormInstance>();
const validatePass = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("角色名称不能为空"));
  } else {
    if (ruleForm.name !== "") {
      if (!ruleFormRef.value) return;
      ruleFormRef.value.validateField("checkPass", () => null);
    }
    callback();
  }
};
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("角色详情不能为空"));
  } else {
    callback();
  }
};
// 表单地绑定数据
const ruleForm = reactive({
  name: "",
  description: "",
  state: 0,
});
const rules = reactive<FormRules<typeof ruleForm>>({
  name: [{ validator: validatePass, trigger: "blur" }],
  description: [{ validator: validatePass2, trigger: "blur" }],
});
// 声明弹框开关
const dialogVisible = ref(false);
const dialogVisible1 = ref(false);
onMounted(() => {
  res();
});
// 获取列表分页数据
const res = async () => {
  let list = await roleList(pages.value, 5);
  roList.value = list.data.data.rows;
  console.log(list.data.data);
  size.value = list.data.data.total;
  let per = await perList();
  console.log(per.data.data);
  perl.value = filterList(per.data.data);
};
// 获取权限属性结构数据
let filterList = (data: any, id = 0) => {
  let newArr: any = [];
  let oldArr = [];
  data.forEach((item: any) => {
    if (item.pid == id) {
      oldArr = filterList(data, item.id);
      if (oldArr.length > 0) {
        item.children = oldArr;
      }
      newArr.push(item);
    }
  });
  return newArr;
};
const indexMethod = (index: number) => {
  return index + 1;
};
// 操作时地绑定数据
let upid = ref(0);
let upstate = ref(0);
let upname = ref("");
let updescription = ref("");
let pages = ref(1);
let size = ref(0);
let perl = ref([]);
let roList = ref([
  {
    id: 1,
    name: "阿斯顿",
    description: "我不知道",
    state: 0,
  },
  {
    id: 2,
    name: "阿斯顿2",
    description: "我不知道",
    state: 1,
  },
  {
    id: 3,
    name: "阿斯顿3",
    description: "我不知道",
    state: 0,
  },
  {
    id: 4,
    name: "阿斯顿4",
    description: "我不知道",
    state: 0,
  },
]);
// 开关地绑定数据
const change = () => {
  if (upstate.value == 1) {
    upstate.value = 0;
  } else {
    upstate.value = 1;
  }

  console.log(upstate.value);
};
const change1 = () => {
  if (ruleForm.state == 0) {
    ruleForm.state = 1;
  } else {
    ruleForm.state = 0;
  }
};
// 分页器地页码
const handleCurrentChange = (val: number) => {
  pages.value = val;
  res();
};
// 修改时回显赋值
const upda = (item) => {
  upid.value = item.id;
  upname.value = item.name;
  upstate.value = item.state;
  updescription.value = item.description;
};
// 删除数据
const confirm = async (idd) => {
  await roledel(idd);
  res();
};
// 点击添加打开数据
const soleadd = () => {
  ruleForm.name = "";
  ruleForm.description = "";
  dialogVisible.value = true;
};
// 添加数据接口
const roadd = async () => {
  await roleadd(ruleForm);
  res();
  dialogVisible.value = false;
};
// 关闭修改框
const upno = () => {
  upid.value = 0;
};
// 确认修改接口
const upok = async () => {
  let obj = {
    id: upid.value,
    name: upname.value,
    description: updescription.value,
    state: upstate.value,
  };
  await roleupd(upid.value, obj);
  res();
  console.log(obj);

  upid.value = 0;
};
// 分配权限显示
let solepermIds = ref([]);
let solefid = ref(0);
const soleper = async (iid) => {
  let asd = await rolexp(iid);
  solefid.value = iid;
  // solepermIds.value = asd.data.data.permIds;
  console.log(asd.data.data.permIds);

  dialogVisible1.value = true;
  treeRef.value!.setCheckedKeys(asd.data.data.permIds, false);
};
const defaultProps = {
  children: "children",
  label: "name",
};
// 修改绑定权限
const perupcc = async () => {
  let perupa = treeRef.value!.getCheckedKeys(false);
  let obj = { id: solefid.value, permIds: perupa };
  await roleper(obj);
  console.log(perupa);
  dialogVisible1.value = false;
  res();
};
</script>

<template>
  <div class="cont">
    <el-dialog
      v-model="dialogVisible"
      title="添加角色"
      width="500"
      :before-close="handleClose"
    >
      <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
      >
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="ruleForm.name" type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item label="启用" prop="checkPass">
          <el-switch :model-value="ruleForm.state == 0" @change="change1" />
        </el-form-item>
        <el-form-item label="角色描述" prop="description">
          <el-input
            v-model="ruleForm.description"
            type="text"
            autocomplete="off"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="roadd()"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog
      v-model="dialogVisible1"
      title="分配权限"
      width="500"
      :before-close="handleClose"
    >
      <el-tree
        style="max-width: 600px"
        :data="perl"
        show-checkbox
        node-key="id"
        :props="defaultProps"
        ref="treeRef"
      />

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible1 = false">取消</el-button>
          <el-button type="primary" @click="perupcc()"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
    <el-button type="primary" color="#2752fb" @click="soleadd()"
      >添加角色</el-button
    >
    <div class="list">
      <el-table :data="roList" border style="width: 100%">
        <el-table-column
          type="index"
          :index="indexMethod"
          label="序号"
          width="70"
        />
        <el-table-column label="角色" width="200" #default="props">
          <p v-show="props.row.id != upid">{{ props.row.name }}</p>
          <p v-show="props.row.id == upid">
            <input type="text" v-model="upname" />
          </p>
        </el-table-column>
        <el-table-column #default="props" label="启用" width="200">
          <p v-show="props.row.id != upid">
            {{ props.row.state == 0 ? "已启用" : "未启用" }}
          </p>
          <p v-show="props.row.id == upid">
            <el-switch :model-value="upstate == 0" @change="change" />
          </p>
        </el-table-column>
        <el-table-column #default="props" label="描述" width="500">
          <p v-show="props.row.id != upid">{{ props.row.description }}</p>
          <p v-show="props.row.id == upid">
            <textarea
              id=""
              cols="60"
              rows="2"
              v-model="updescription"
            ></textarea>
          </p>
        </el-table-column>
        <el-table-column label="操作" #default="props">
          <p v-show="props.row.id != upid">
            <el-button
              style="color: #409eff"
              link
              @click="soleper(props.row.id)"
            >
              分配权限
            </el-button>
            <el-button style="color: #409eff" link @click="upda(props.row)">
              编辑
            </el-button>

            <el-popconfirm
              title="是否确定删除?"
              @confirm="confirm(props.row.id)"
            >
              <template #reference>
                <el-button style="color: #409eff" link> 删除 </el-button>
              </template>
            </el-popconfirm>
          </p>
          <p v-show="props.row.id == upid">
            <el-button type="primary" @click="upok()">确认</el-button>
            <el-button @click="upno()">取消</el-button>
          </p>
        </el-table-column>
      </el-table>
    </div>
    <div class="example-pagination-block">
      <el-pagination
        layout="prev, pager, next"
        :total="size"
        :default-page-size="5"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<style  scoped>
.list {
  margin-top: 10px;
}
.example-pagination-block + .example-pagination-block {
  margin-top: 10px;
}
.example-pagination-block .example-demonstration {
  margin-bottom: 16px;
}
.col {
  overflow: hidden;
}
.cleft {
  float: left;
  text-align: right;
  width: 80px;
  margin: 10px;
}
.right {
  float: left;
}
</style>
    